<script setup>
import QrcodeVue from "qrcode.vue"
import { defineProps } from "vue"
import { onBeforeRouteLeave } from "vue-router"
import { useSocket } from '@/hooks/useQRSocket.js'
import {ticketStateEnum} from "../../activityPages/const/ticketStateEnum.ts";
import { repeatArrayElements } from '@/utils/array-utils'

const props = defineProps({
  data: Object,
  isCoupon: Boolean,
})

onBeforeRouteLeave(() => {
  socketClose && socketClose()
})

const { initSocket, socketClose, cardIdStatus, getStatus } = useSocket()

// const cardids = props.data.orderTicketListVos[0]?.ticketIds.split(',')
const cardids = props.data.orderTicketVos.map((item)=>item.ticketId)

const swipeItemChange = (e) => {
  socketClose()
  initSocket(cardids[e])
}
initSocket(cardids[0])
function  getSpus(){
  if(props.data.spuListVos?.[0].bundleTag===1){
    const buyCount = props.data.spuListVos[0].orderSkuVo.buyCount

    const sub =  props.data.spuListVos.slice(1)

    if(buyCount>1){

      return  repeatArrayElements(sub,buyCount)
    }
    return  sub
  }

  return props.data.spuListVos
}

</script>

<template>
  <div class="qr_banner" v-if="cardids?.length>0">
    <van-swipe @change="swipeItemChange">
      <van-swipe-item v-for="(item,index) in cardids" :key="item.index">
        <div class="swipe_item_box">
          <div v-if="isCoupon &&getSpus()?.length>1" style="display: flex;flex-direction: column;align-items: center">
            <div style="font-weight: bold;font-size: 12px;">{{getSpus()[index]?.spuName}}</div>
            <div style="font-size: 11px;color: grey">使用时间：{{getSpus()[index]?.orderSkuVo.validStartTime}}到{{getSpus()[index]?.orderSkuVo.validEndTime}}</div>
            <div style="height: 5px"></div>
          </div>
          <div class="swipe_item_box_bg">
            <div
              v-show="cardIdStatus[item] === '1' || cardIdStatus[item] === '2'"
              class="status"
            >
              {{ getStatus(cardIdStatus[item]) }}
            </div>

            <qrcode-vue :value="item" :size="100" level="H" />
          </div>
          <div class="text">票券码：{{ item }}</div>
          <div class="text" style="margin-top: 0px">{{ ticketStateEnum[props.data.orderTicketVos.filter(card=>card.ticketId===item)?.[0].state]}}</div>
        </div>
      </van-swipe-item>
      <template #indicator="{ active, total }" >
        <div v-if="total > 1" class="custom-indicator">
          <div class="custom-indicator_box">
            <span class="active">{{active + 1  || "0 "}}</span>
            <span class="line">/</span>
            {{ total }}
          </div>
        </div>
      </template>
    </van-swipe>
  </div>
</template>

<style scoped lang="scss">
.qr_banner{
  .swipe_item_box{
    display: flex;
    flex-direction: column;
    align-items: center;
    .swipe_item_box_bg {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100px;
      height: 100px;
      z-index: 100000;
      .status{
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 102px;
        height: 102px;
        background-color: rgba(255, 255, 255, 0.95);
        font-size: 1.4rem;
        font-weight: bold;
        color: #333333;
      }
    }
    .text{
      margin-top: 2rem;
      font-size: 1.4rem;
      color: #333333;
    }
  }
}
.custom-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  font-size: 1.2rem;
  color: #333333;
  .custom-indicator_box{
    background: rgba(51,51,51,0.05);
    border-radius: .3rem;
    padding: 0 .8rem;
    .active{
      color: var(--van-primary-color);
    }
    .line{
    }
  }
}
</style>